<template>
  <div>
    <el-container>
      <el-header>
        <div class="searchStyle">
          <div class="firstSytle">
            <div>
              <el-button size="mini" type="success" @click="initData" icon="el-icon-refresh">刷新</el-button>
              <el-button size="mini" type="primary" @click="add" icon="el-icon-circle-plus-outline">发布检查结果</el-button>
              <el-button size="mini" type="danger" @click="deleteBatch" icon="el-icon-delete">删除</el-button>
            </div>
            <div>
              <el-input size="mini" v-model="searchBuildId" placeholder="请选择公寓号" class="inputStyle"></el-input>
              <el-input size="mini" v-model="searchRoomId" placeholder="请选择房间号" class="inputStyle"></el-input>
              <el-input size="mini" v-model="searchDiscover" placeholder="请输入检查人" class="inputStyle"></el-input>
              <el-input size="mini" v-model="searchDiscoverTime" placeholder="请选择检查时间" class="inputStyle"></el-input>
              <el-button size="mini" type="primary" @click="searchAll">查询</el-button>
              <el-button size="mini" type="primary" @click="emptyInput">重置</el-button>
            </div>

          </div>

        </div>
      </el-header>
      <el-main style="padding-left: 1px;padding-top: 20px;height:100%">
        <div>
          <el-table :data="securitys" stripe v-loading="tableLoading" size="mini" style="width: 100%;"  @selection-change="selectDel">
            <el-table-column type="selection" width="30px"></el-table-column>
            <el-table-column prop="listId" label="序号" width="45px" align="center"></el-table-column>
            <el-table-column prop="id" label="检查编号"  min-width="70px" align="center"></el-table-column>
            <el-table-column prop="buildId" label="公寓编号"  min-width="70px" align="center"></el-table-column>
            <el-table-column prop="roomId" label="宿舍号" align="center"></el-table-column>
            <el-table-column prop="description" label="隐患描述" width="180px" align="center"></el-table-column>
            <el-table-column prop="discover" label="检查人" align="center"></el-table-column>
            <el-table-column prop="discoverTime" label="检查时间" align="center"></el-table-column>
            <el-table-column prop="status" label="隐患状态" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="200px"> 
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="details(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteId(scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="lastLine" style="margin-top: 10px">               
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="pageNum" :page-sizes="[10, 20,30,50,100,200,]"
                           :page-size="pageSize"
                           layout="sizes, prev, pager, next" :total="total">      
            </el-pagination>
          </div>
        </div>
      </el-main>
    </el-container>

    <el-dialog title="详情" :visible.sync="clickbutton" width="30%">
      <el-form :model="formSecurity" label-width="100px">
        <el-form-item label="公寓编号: ">
          <el-select v-model="formSecurity.buildId" style="width:100%;" @change="handleBuild">
            <el-option v-for="item in selectBulid" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="宿舍号: ">
          <el-select v-model="formSecurity.roomId" style="width:100%;" @change="handleRoom">
            <el-option v-for="item in selectRoom" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="隐患描述: ">
          <el-input v-model="formSecurity.description"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer">
        <el-button size="mini" type="primary" @click="clickbutton=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="UpdateSecurity">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="发布检查结果" :visible.sync="clickAddButton" width="30%">
      <el-form :model="addSecurity" label-width="100px" :rules="rules" ref="rulesForm">
        <el-form-item label="公寓编号: " prop="buildId">
          <el-select v-model="addSecurity.buildId" style="width:100%;" @change="handleBuild">
            <el-option v-for="item in selectBulid" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="宿舍号: " prop="roomId">
          <el-select v-model="addSecurity.roomId" style="width:100%;" @change="handleRoom">
            <el-option v-for="item in selectRoom" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隐患描述: " prop="description">
          <el-input v-model="addSecurity.description"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button size="mini" type="primary" @click="clickAddButton=false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addOneSecurity('rulesForm')">发 布</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
    import {getRequest, postMethod, postRequest, putRequest} from "../../utils/api";

    export default {
        data() {
            return {
                searchDiscoverTime: '',
                searchDiscover: '',
                searchRoomId: '',
                searchBuildId: '',
                addSecurity: {
                    buildId: '',
                    roomId: '',
                    description: '',
                },
                securitys: [],
                tableLoading: false,
                clickbutton: false,
                clickAddButton: false,
                formSecurity:
                    {
                        id: '',
                        buildId: '',
                        roomId: '',
                        description: '',
                        discover: "",
                        discoverTime: '',
                        status: '',
                    },
                pageNum: 1,
                pageSize: 10,
                total: 0,
                list: [],
                requestObj: {
                    orderConditions: [],
                    pageNum: 1, //当前页数
                    pageSize: 10, //每页条数
                    whereConditions: [],
                },
                tempBuildId:'',
                tempRoomId:'',
                selectBulid: [ //楼号
                    {
                        label: '',
                        value: '',
                    }
                ],
                selectRoom: [ //楼号
                    {
                        label: '',
                        value: '',
                    }
                ],
                tableId:[],
                rules:{
                    buildId:[
                        { required: true, message: '请输入公寓编号', trigger: 'blur' }
                    ],
                    roomId:[
                        { required: true, message: '请输入房间号', trigger: 'blur' }
                    ],
                    description:[
                        { required: true, message: '请输入隐患描述', trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            initData: function () {
                this.tableLoading = true;
                 var tempdate
                // var _this = this;
                this.getRequest("/security/sec/list?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total;
                        this.securitys = resp.data.obj.data;
                        for (var i = 0; i < this.securitys.length; i++) {
                            let b;
                            b = i + 1
                            this.securitys[i].listId = b
                            tempdate =this.securitys[i].discoverTime
                            this.securitys[i].discoverTime=tempdate.slice(0,tempdate.indexOf("."))
                            switch (this.securitys[i].status) {
                                case 0:
                                    this.securitys[i].status = '待解决';
                                    break;
                                case 1:
                                    this.securitys[i].status = '已解决';
                                    break;
                            }
                        }
                        this.clickAddButton = false;
                    }
                })
            },
            loadEmpty() {
                this.tableLoading = true;
                this.getRequest("/security/sec/list?pageSize=" + this.pageSize + "&pageNum=" + this.pageNum).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.obj.total;
                        this.securitys = resp.data.obj.data;
                    }
                    this.clickAddButton = false;
                })
            },
            deleteId(row) {
                var id = row.id;
                this.tableLoading = true;
                this.deleteRequest("security/sec/delById/" + id).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                    }
                })
            },
            addOneSecurity(formName) {
              var tempId,tempId2
              tempId= this.addSecurity.buildId
              this.addSecurity.buildId=this.getSelectLabel(this.selectBulid,tempId)
              tempId2=this.addSecurity.roomId
              this.addSecurity.roomId=this.getSelectLabel(this.selectRoom,tempId2)
              this.$refs[formName].validate((valid)=>{
                if(valid){
                  postMethod("/security/sec/add", this.addSecurity).then(resp => {
                    this.tableLoading = true;
                    if (resp && resp.status == 200) {
                        this.clearForms();
                        this.clickAddButton=false;
                        this.initData();
                        Message.success({message: data.data.msg});
                    } else {
                        Message.error({message: data.data.msg});
                    }
                })
                }else{
                  return false;
                }
              })

            },
            getSelectLabel(selectList, tempListId) {
                for (var i = 0; i < selectList.length; i++) {
                    if (tempListId == selectList[i].value) {
                        return selectList[i].label
                    }
                }
            },
            UpdateSecurity() {//确认修改
                this.formSecurity.status = '待解决' ? 1 : 0
                if(this.tempRoomId!=""){
                 this.tempRoomId = this.formSecurity.roomId
                  this.formSecurity.roomId = this.getSelectLabel(this.selectRoom, this.tempRoomId)
                }
                if(this.tempBuildId!=""){
                  this.tempBuildId = this.formSecurity.buildId
                  this.formSecurity.buildId = this.getSelectLabel(this.selectBulid, this.tempBuildId)
                }
                postMethod("/security/sec/update", this.formSecurity).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                        this.clickbutton = false;
                    } else {
                        Message.error({message: data.data.msg});
                    }
                })
                this.clickbutton = false;
            },
            details(row) {   //详情
                this.formSecurity = row;
                this.clickbutton = true
            },
            add() {
                this.clickAddButton = true;
            },
            clearForms() {
                this.addSecurity = {
                    buildId: '',
                    roomId: '',
                    description: '',
                }
            },

            searchAll() {
                this.initDataParms();
                this.tableLoading = true;
                postMethod("/security/sec/findByKeyWords", this.requestObj).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.total = resp.data.data.total
                        this.securitys = resp.data.data.data;
                        for (var i = 0; i < this.securitys.length; i++) {
                            this.securitys[i].listId = i + 1
                            switch (this.securitys[i].status) {
                                case 0:
                                    this.securitys[i].status = '待解决';
                                    break;
                                case 1:
                                    this.securitys[i].status = '已解决';
                                    break;
                            }
                        }
                    }
                })

            },

            initDataParms() {
                this.getSort();
                this.requestObj.whereConditions = [];
                if (this.searchBuildId !== '') {
                    this.requestObj.whereConditions.push({
                        field: "buildId",
                        method: 'Equal',
                        value: this.searchBuildId,
                    })
                }
                if (this.searchRoomId !== '') {
                    this.requestObj.whereConditions.push({
                        field: "roomId",
                        method: 'Equal',
                        value: this.searchRoomId,
                    })
                }
                if (this.searchDiscover !== '') {
                    this.requestObj.whereConditions.push({
                        field: "discover",
                        method: 'Equal',
                        value: this.searchDiscover,
                    })
                }
                if (this.searchDiscoverTime !== '') {
                    this.requestObj.whereConditions.push({
                        field: "discoverTime",
                        method: 'Equal',
                        value: this.searchDiscoverTime,
                    })
                }
            },
            getSort() {
                this.requestObj.orderConditions.push({
                    field: 'roomId',
                    method: 'ASC',
                });
                this.requestObj.orderConditions.push({
                    field: 'discoverTime',
                    method: 'DESC',
                });
            },
            emptyInput() {
                this.searchRoomId = '';
                this.searchBuildId = '';
                this.searchOperator = '';
                this.searchDiscoverTime = '';
                this.initData();
            },

            handleSizeChange(val) {    //分页
                this.pageSize = val;
                this.initData()
            },
            handleCurrentChange(val) {   //分页
                this.pageNum = val;
                this.initData()
            },
            handleBuild(row){
              this.tempBuildId=row
            },
            handleRoom(row){
              this.tempRoomId=row
            },
             getBulid() {   //获取楼号
                this.getRequest("/config/build").then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        var tempList = []
                        tempList = resp.data.obj
                        for (var i = 0; i < tempList.length; i++) {
                            this.selectBulid = tempList
                            this.selectBulid[i].label = tempList[i].buildId
                            this.selectBulid[i].value = tempList[i].id
                        }
                    }
                })
            },
             getRoom() {    //获取宿舍号
              this.getRequest("/config/room").then(resp => {
                  this.tableLoading = false;
                  if (resp && resp.status == 200) {
                      var tempList = []
                      tempList = resp.data.obj
                      for (var i = 0; i < tempList.length; i++) {
                          this.selectRoom = tempList
                          this.selectRoom[i].label = tempList[i].roomId
                          this.selectRoom[i].value = tempList[i].id
                      }
                  }
              })
            },
             selectDel(row){
              if(row.length!=0){
                for(var i=0;i<row.length;i++){
                  this.tableId[i]=row[i].id;
                }
                  this.tableId= this.tableId.slice(0,row.length)
              }else if(row.length == 0){
                  this.tableId=row
              }
            },
             deleteBatch(){
              if(this.tableId.length===0){
                  this.$message.error('请选择要删除的项目');
                  return false;
              }
              this.deleteRequest("security/deleteBatch/" + this.tableId).then(resp => {
                    this.tableLoading = false;
                    if (resp && resp.status == 200) {
                        this.initData();
                        Message.success({message: data.data.msg});
                    }
                })
            },
        },
        mounted: function () {
            this.initData();
            this.getBulid();
            this.getRoom();
        },

    }
</script>

<style scoped>

  .searchStyle{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .firstSytle{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:space-between ;
  }
  .inputStyle{
    width: 140px;
    margin-right: 5px;
  }
  .lastLine {
   display:  flex;
   flex-direction:  row;
   justify-content:  flex-end;
   margin:  10px 0 10px 0;
  }

  .el-row {
    margin: 10px 0;
  }

  .el-table {
    text-align: left;
    size: auto;
    width: 150px;
  }
</style>
